<template>
  <div id="index">

    <scroller
      :on-refresh="refresh"
      :on-infinite="infinite"
      :noDataText="orderData.length? '运单已全部加载~~': ''"
      style="padding-top: 0rem;">
      <div class="bj-item" v-for="(item, index) in orderData">
        <div>
          <div class="title flex flex-middle flex-space-between" @click="toDetail(item.id)">
            <div class="flex flex-middle">
              <i class="icon icon-shijian" style="font-size: 0.34rem"></i>
              <span>{{item.pick_up_time}}前取货</span>
            </div>
            <div class="text-orange" v-if="serverID != 8">
              中标金额: {{item.freight}}元
            </div>
            <div v-if="serverID == 8">
              <span v-if="item.status != 1">未中标</span>
              <span class="text-orange" style="font-weight: bold;" v-else>待中标</span>
            </div>
          </div>

          <div class="puser vux-1px-b">
            <div class="usermsg">
              <img :src="item.p_user_info.face" />
              <span>{{item.p_user_info.nick_name}}</span>
            </div>
            <div>
              <a :href="'tel:' + item.p_user_info.phone">
                <i class="icon icon-phone phone-icon"></i>
              </a>
            </div>
          </div>

          <div class="info" @click="toDetail(item.id)">
            <div class="item overflowtext">
              <i class="icon icon-ziyuan21"></i>
              <span class="addressname">{{item.p_addr}} {{item.p_addr_more}}</span>
            </div>
            <div class="item overflowtext">
              <i class="icon icon-ziyuan11"></i>
              <span class="addressname">{{item.q_addr}} {{item.q_addr_more}}</span>
            </div>
            <div class="item overflowtext" style="margin-bottom: 0rem">
              <i class="icon icon-Ankerwebicon-"></i>
              <span>
                  {{item.service || '' }} {{item.goods_list || '' }}{{item.goods_info  || ''}}
                  <span v-if="item.weight > 0">{{item.weight}}{{item.unit || '吨'}}</span>
                  <span v-if="item.volume > 0">{{item.volume}}方</span>
                  <span v-if="item.number > 0">{{item.number}}件</span>
                  {{ item.package || '' }}
                </span>
              <i class="icon icon-image" v-if="item.goods_img1 || item.goods_img2" style="color: #2d8cf0;"></i>
            </div>
            <div class="item overflowtext">
              <i class="icon icon-che" v-if="serverID != 7" style="font-size: 0.36rem"></i>
              <i class="icon icon-dingdan" v-if="serverID == 7" style="font-size: 0.36rem"></i>
              <span>
                {{item.car_id || ''}}
                {{item.car_length || ''}}
                {{item.extra_need  || ''}}
                {{item.has_certificate || ''}}
                {{item.remark || ''}}
              </span>
              <i class="icon icon-baozhang" v-if="item.has_safety > 0" style="color: #2d8cf0;"></i>
            </div>
          </div>
        </div>

        <div class="action flex flex-middle flex-space-between" v-if="serverID != 8">
          <div class="text-orange">
          </div>
          <div>
            <x-button type="primary" @click.native="handleCancle(item.id, index)" action-type="button" class="out-line" mini>
              取消运单
            </x-button>
            <x-button type="primary" @click.native="handleReportDriver(item.id)" action-type="button" mini>
              上报司机
            </x-button>
          </div>
        </div>

        <div class="action flex flex-middle flex-space-between" v-if="serverID == 8" id="zcbtn">
          <div></div>
          <div class="text-orange">
            <x-button :type="item.status != 1?'default': 'primary'" :disabled="item.status != 1" @click.native="handlePay(index)" action-type="button" mini>支付</x-button>
          </div>
          <!--<div v-if="item.is_dispatch == 0">-->
            <!--<x-button type="primary" @click.native="handleCancle(item.id, index)" action-type="button" class="out-line" mini>取消运单</x-button>-->
            <!--<x-button type="default" @click.native="handleDD(item.id, index)" action-type="button" mini>线下调度</x-button>-->
            <!--<x-button type="warn" @click.native="handleNetwork(item.id, index)" action-type="button" mini>全网调度</x-button>-->
            <!--<x-button type="primary" @click.native="handleMyDriver(item.id, index)" action-type="button" mini>调度我的司机</x-button>-->
          <!--</div>-->
          <!--<div v-if="item.is_dispatch != 0">-->
            <!--<x-button type="primary" @click.native="handleCancle(item.id, index)" action-type="button" class="out-line" mini>取消运单</x-button>-->
            <!--<x-button type="primary" @click.native="handleFinish(item.id, index)" action-type="button" mini>调度完成</x-button>-->
          <!--</div>-->
        </div>
      </div>

    </scroller>

    <div class="null" v-if="!orderData.length && !isLoading">
      <img src="../../../static/img/nullorder.png" style="height: 2.95rem; width: 3.3rem;">
      <p>您还没有中标的运单，赶快去报价吧~~</p>
    </div>

  </div>
</template>
<script>
  import { getDateDiff, get_time_format } from '../../libs/until'
  import { Clocker } from 'vux'
  export default{
    components: {
      Clocker
    },
    computed: {
      serverID() {
        return this.$store.state.userInfo.service_id || 0
      },
      scrollerMarTop() {
        const u = navigator.userAgent
        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        return isAndroid? '-0.2rem': '0rem'
      },
      filterItemUri() {
        const { service_id } = this.$store.state.userInfo
        if(service_id == 6) {
          return $config.host + '/api/Inquirycitycar/getQuotesPrice'
        } else if(service_id == 7) {
          return $config.host + '/api/Inquiryzerobear/getOrderList'
        } else if(service_id == 8) {
          return $config.host + '/api/Inquirycityvehicle/alreadyOffer'
        }
      },
      cancleUri() {
        const { service_id } = this.$store.state.userInfo
        if(service_id == 6) {
          return $config.host + '/api/Inquirycitycar/cancelCityCar'
        } else if(service_id == 7) {
          return $config.host + '/api/Inquiryzerobear/cancelOrder'
        } else if(service_id == 8) {
          return $config.host + '/api/Inquirycityvehicle/cancelOrder'
        }
      },
      ddUri() {
        return $config.host + '/api/Inquirycitycar/updateQuotesThrees'
      },
    },
    created() {
      this.getData()
    },
    data() {
      return {
        isLoading: true,
        nullMsg: '暂无数据',
        filterItem: {
          page: 1,
          pagesize: 10,
          status: '2',
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid
        },
        pages: 0,
        orderData: []
      }
    },
    methods: {
      infinite(done) {
        if(this.filterItem.page >= this.pages) {
          done(true)
          return
        }
        if(!this.isLoading) {
          this.isLoading = true
          this.filterItem.page += 1
          this.getData(done)
        }

      },
      refresh(done) {
        this.pages = 0
        this.filterItem.page = 1
        setTimeout(() => {
          this.nullMsg = ''
          //this.orderData = []
          this.getData(done(), 'refresh')
        }, 1000)

      },
      getData(done = () => {}, refresh = '') {
        this.isLoading = true
        this.$http.post(this.filterItemUri, qs.stringify(this.filterItem)).then((res) => {
          const {code, data, msg} = res.data
          if(code == '1' && data) {

            this.filterItem.page = parseInt(data.page)
            this.pages = parseInt(data.pages)
            //刷新删除所有的数据
            data.data.map(item => {
              item.pick_up_time = get_time_format(item.pick_up_time)
              item.pick_up = getDateDiff(item.pick_up)
              item.deadline = get_time_format(item.deadline)
            })

            this.orderData = this.filterItem.page == 1? data.data || []: [...orderData, ...data.data]


            // if(refresh) {
            //   this.orderData = data.data
            // } else {
            //   this.orderData = this.orderData.concat(data.data)
            // }
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.nullMsg = msg
          }
          done()
          this.isLoading = false
        }).catch((err) => {
          done()
          this.isLoading = false
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },

      toDetail(oid) {
        this.$router.push({name: 'inDispatch', query: {oid}})
      },

      handleCancle(oid, index) {
        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '亲，取消运单调度费不会返还，同时还会扣除您的信用值，信用值过低影响优先获得运单推送，再考虑一下！',
          confirmText: '确认取消',
          cancelText: '再想想',
          onConfirm: () => {
            this.$vux.loading.show({
              text: '运单取消中'
            })
            this.$http.post(this.cancleUri, qs.stringify({
              client: $config.client_type,
              device: $config.device_type,
              token: this.$store.state.userInfo.token,
              uid: this.$store.state.userInfo.uid,
              oid
            })).then((res) => {
              const {code, msg} = res.data
              this.$vux.loading.hide()
              if(code == '1') {
                this.orderData.splice(index, 1)
              } else if (code == '3') {
                this.$vux.toast.text($config.loginErrMsg, 'middle')
                this.$router.push({path: '/logout'})
              } else {
                this.$vux.toast.text(msg, 'middle')
              }

            }).catch((err) => {
              this.$vux.toast.text($config.errMsg, 'middle')
            })
          }
        })
      },
      //上报司机
      handleReportDriver(oid) {
        this.$router.push({path: '/reportDriver', query: {oid, serviceid: this.serverID}})
      },
      //线下调度
      handleDD(oid, index) {
        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '您确认已经调度司机了吗？',
          confirmText: '已调度',
          onConfirm: () => {
            this.$vux.loading.show({
              text: '调度中...'
            })
            this.$http.post(this.ddUri, qs.stringify({
              client: $config.client_type,
              device: $config.device_type,
              token: this.$store.state.userInfo.token,
              uid: this.$store.state.userInfo.uid,
              oid,
              service_id: this.$store.state.userInfo.service_id
            })).then((res) => {
              const {code, msg} = res.data
              this.$vux.loading.hide()
              if(code == '1') {
                if(this.serverID == 8){
                  this.orderData[index].is_dispatch = 1;
                }
                this.$vux.toast.text('调度成功', 'middle')
              } else if (code == '3') {
                this.$vux.toast.text($config.loginErrMsg, 'middle')
                this.$router.push({path: '/logout'})
              } else {
                this.$vux.toast.text(msg, 'middle')
              }

            }).catch((err) => {
              this.$vux.toast.text($config.errMsg, 'middle')
            })
          }
        })
      },
      //调度完成
      handleFinish(oid, index) {
        this.$http.post($config.host + '/api/Inquirycityvehicle/LineDiaodu', qs.stringify({
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid,
          oid
        })).then((res) => {
          const {code, msg} = res.data
          if(code == '1') {
            this.$router.push({path: 'order', query: {s: '3'}})
            this.$vux.toast.text('招标已发送，等待司机来报价！', 'middle')
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch((err) => {
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      //调度我的司机
      handleMyDriver(oid, index) {
        this.$router.push({path: '/dispatchDriver', query: {oid}})
      },
      //全网调度
      handleNetwork(oid, index) {
        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '确认后，运单将进行全网调度司机！',
          confirmText: '全网调度',
          onConfirm: () => {
            this.$vux.loading.show({
              text: '全网调度中'
            })
            this.$http.post($config.host + '/api/Inquirycityvehicle/callAllLine', qs.stringify({
              client: $config.client_type,
              device: $config.device_type,
              token: this.$store.state.userInfo.token,
              uid: this.$store.state.userInfo.uid,
              oid
            })).then((res) => {
              const {code, msg} = res.data
              this.$vux.loading.hide()
              if(code == '1') {
                this.$router.push({path: 'order'})
                this.$vux.toast.text('已发布至全网', 'middle')
              } else if (code == '3') {
                this.$vux.toast.text($config.loginErrMsg, 'middle')
                this.$router.push({path: '/logout'})
              } else {
                this.$vux.toast.text(msg, 'middle')
              }

            }).catch((err) => {
              this.$vux.toast.text($config.errMsg, 'middle')
            })
          }
        })
      },

      //支付信息费
      handlePay(index) {
        this.$router.push({path: '/payOfInformation', query: {data: JSON.stringify(this.orderData[index])}})
      }
    }
  }
</script>
<style scoped>
  .bj-item {
    margin-bottom: 0.3rem;
    box-shadow: 0px 0px 0.1rem rgba(0,0,0,0.1);
    background: #fff;
    padding: 0rem 0.2rem;
  }
  .bj-item .title{
    height: 1rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.2rem;
  }
  .bj-item .icon{
    font-size: 0.3rem;
    display: inline-block;
    margin-right: 0.12rem;
    height: 0.5rem;
    width: 0.5rem;
    text-align: center;
  }
  .icon-ziyuan21, .icon-ziyuan11{
    display: inline-block;
    border: 1px solid #f3532c;
    border-radius: 50%;
    color: #f3532c;
  }
  .addressname{
    color: #222;
    font-size: 0.3rem;
  }
  .bj-item .action{
    border-top: 1px solid #eee;
    margin-top: 0.2rem;
    padding: 0.12rem 0rem;
  }
  .bj-item .info .item{
    margin-bottom: 0.12rem;
  }
  .null{
    text-align: center;
    margin-top: 1.4rem;
  }
  .weui-btn + .weui-btn{
    margin-top: 0rem !important;
  }
  #zcbtn .weui-btn_mini{
    padding: 0 0.95em !important;
  }
</style>
